<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
		<div id="chart-panel" style="height: 600px;width: 100%"></div>
	</body>
	<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.2.1/dist/echarts.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
	<script>
		var dom = document.getElementById("chart-panel");
		var myChart = echarts.init(dom);
		var option;
		var yList = [61, 86, 67, 43, 52, 70, 28, 107];
		var colors = [{
				type: 'linear',
				x: 0,
				x2: 1,
				y: 0,
				y2: 0,
				colorStops: [{
						offset: 0,
						color: '#00FFFF',
					},
					{
						offset: 0.5,
						color: '#00FFFF',
					},
					{
						offset: 0.5,
						color: '#11A6D0',
					},
					{
						offset: 1,
						color: '#11A6D0',
					},
					{
						offset: 0,
						color: '#83bac9',
					},
					{
						offset: 0,
						color: 'rgba(17,166,208,0.3)',
					},
				],
			},
			{
				type: 'linear',
				x: 0,
				x2: 1,
				y: 0,
				y2: 0,
				colorStops: [{
						offset: 0,
						color: '#00FFFF',
					},
					{
						offset: 0.5,
						color: '#00FFFF',
					},
					{
						offset: 0.5,
						color: '#11A6D0',
					},
					{
						offset: 1,
						color: '#11A6D0',
					},
					{
						offset: 0,
						color: '#83bac9',
					},
					{
						offset: 0,
						color: 'rgba(17,166,208,0.3)',
					},
				],
			},
			{
				type: 'linear',
				x: 0,
				x2: 1,
				y: 0,
				y2: 0,
				colorStops: [{
						offset: 0,
						color: '#00FFFF',
					},
					{
						offset: 0.5,
						color: '#00FFFF',
					},
					{
						offset: 0.5,
						color: '#11A6D0',
					},
					{
						offset: 1,
						color: '#11A6D0',
					},
					{
						offset: 0,
						color: '#83bac9',
					},
					{
						offset: 0,
						color: 'rgba(17,166,208,0.3)',
					},
				],
			},
			{
				type: 'linear',
				x: 0,
				x2: 1,
				y: 0,
				y2: 0,
				colorStops: [{
						offset: 0,
						color: '#00FFFF',
					},
					{
						offset: 0.5,
						color: '#00FFFF',
					},
					{
						offset: 0.5,
						color: '#11A6D0',
					},
					{
						offset: 1,
						color: '#11A6D0',
					},
					{
						offset: 0,
						color: '#83bac9',
					},
					{
						offset: 0,
						color: 'rgba(17,166,208,0.3)',
					},
				],
			},
			{
				type: 'linear',
				x: 0,
				x2: 1,
				y: 0,
				y2: 0,
				colorStops: [{
						offset: 0,
						color: '#00FFFF',
					},
					{
						offset: 0.5,
						color: '#00FFFF',
					},
					{
						offset: 0.5,
						color: '#11A6D0',
					},
					{
						offset: 1,
						color: '#11A6D0',
					},
					{
						offset: 0,
						color: '#83bac9',
					},
					{
						offset: 0,
						color: 'rgba(17,166,208,0.3)',
					},
				],
			},
			{
				type: 'linear',
				x: 0,
				x2: 1,
				y: 0,
				y2: 0,
				colorStops: [{
						offset: 0,
						color: '#00FFFF',
					},
					{
						offset: 0.5,
						color: '#00FFFF',
					},
					{
						offset: 0.5,
						color: '#11A6D0',
					},
					{
						offset: 1,
						color: '#11A6D0',
					},
					{
						offset: 0,
						color: '#83bac9',
					},
					{
						offset: 0,
						color: 'rgba(17,166,208,0.3)',
					},
				],
			},
			{
				type: 'linear',
				x: 0,
				x2: 1,
				y: 0,
				y2: 0,
				colorStops: [{
						offset: 0,
						color: '#00FFFF',
					},
					{
						offset: 0.5,
						color: '#00FFFF',
					},
					{
						offset: 0.5,
						color: '#11A6D0',
					},
					{
						offset: 1,
						color: '#11A6D0',
					},
					{
						offset: 0,
						color: '#83bac9',
					},
					{
						offset: 0,
						color: 'rgba(17,166,208,0.3)',
					},
				],
			},
			{
				type: 'linear',
				x: 0,
				x2: 1,
				y: 0,
				y2: 0,
				colorStops: [{
						offset: 0,
						color: '#00FFFF',
					},
					{
						offset: 0.5,
						color: '#00FFFF',
					},
					{
						offset: 0.5,
						color: '#11A6D0',
					},
					{
						offset: 1,
						color: '#11A6D0',
					},
					{
						offset: 0,
						color: '#83bac9',
					},
					{
						offset: 0,
						color: 'rgba(17,166,208,0.3)',
					},
				],
			},
			{
				type: 'linear',
				x: 0,
				x2: 1,
				y: 0,
				y2: 0,
				colorStops: [{
						offset: 0,
						color: '#00FFFF',
					},
					{
						offset: 0.5,
						color: '#00FFFF',
					},
					{
						offset: 0.5,
						color: '#11A6D0',
					},
					{
						offset: 1,
						color: '#11A6D0',
					},
					{
						offset: 0,
						color: '#83bac9',
					},
					{
						offset: 0,
						color: 'rgba(17,166,208,0.3)',
					},
				],
			},
		];
		option = {
			backgroundColor: 'black',
			grid: {
				left: '15%',
				right: '3%',
				top: '10%',
				bottom: '15%',
			},
			xAxis: {
				nameTextStyle: {
					color: '#00dcf1',
					padding: [0, 0, 0, 20],
				},
				data: ['杭商院北门', '港边路口', '张家口', '马冢', '马家村', '未来学校', '金竹新村', '学府小学'],
				show: true,
				type: 'category',
				axisLabel: {
					// rotate: -30, // 设置文字旋转
					fontSize: 12,
					lineHeight: 24,
					fontFamily: 'siyuan',
					// fontStyle: 'italic', // 设置文字斜体
					textStyle: {
						//改变刻度字体样式
						color: '#fff',
					},
				},
				axisTick: {
					show: false,
				},
			},
			yAxis: {
				show: true,
				splitNumber: 4,
				splitLine: {
					show: true,
					lineStyle: {
						type: 'dashed',
						color: 'rgba(255,255,255,0.2)',
					},
				},
				axisLabel: {
					color: '#fff',
				},

				axisTick: {
					//y轴刻度线
					show: false,
				},
				axisLine: {
					//y轴
					show: false,
				},
			},
			series: [{
					type: 'bar',
					barWidth: '40',
					showBackground: true,
					backgroundStyle: {
						color: 'none',
					},
					itemStyle: {
						normal: {
							color: function(params) {
								//console.log(params)
								return colors[params.dataIndex % 7];
							},
						},
					},
					label: {
						show: true,
						position: [20, -25],
						color: '#fff',
						fontSize: 12,
						fontStyle: 'bold',
						align: 'center',
					},

					data: yList,
				},
				{
					z: 2,
					type: 'pictorialBar',
					data: yList,
					symbol: 'diamond',
					symbolOffset: [0, '50%'],
					symbolSize: [40, 10],
					itemStyle: {
						normal: {
							color: function(params) {
								return colors[params.dataIndex % 7];
							},
						},
					},
				},
				{
					z: 3,
					type: 'pictorialBar',
					symbolPosition: 'end',
					data: yList,
					symbol: 'diamond',
					symbolOffset: [0, '-50%'],
					symbolSize: [40, 40 * 0.25],
					itemStyle: {
						normal: {
							borderWidth: 0,
							color: function(params) {
								return colors[params.dataIndex % 7].colorStops[0].color;
							},
						},
					},
				},
			],
		};
		if (option && typeof option === 'object') {
			myChart.setOption(option);
		}
	</script>
</html>
